<!--
 * @Author: hifishroom
 * @Date: 2021-08-23 18:44:20
 * @LastEditTime: 2021-09-04 13:00:42
 * @FilePath: \backstage\src\components\content\detailItem\DetailItem.vue
-->
<template>
  <div class="DetailItem" @click="propertyClick(list.name)">
    <div class="DetailItem-pad">
      <div class="DetailItem-img-box">
        <img
          :src="list.img"
          alt=""
          :title="list.title"
          class="DetailItem-img"
        />
      </div>
      <div class="DetailItem-text using text-center">
        {{ list.title }}<br />{{ list.intro }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailItem",
  props: {
    list: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods: {
    propertyClick(name) {
      this.$router.push({
        name: "Property",
        params: {
          name: name
        }
      });
    }
  }
};
</script>

<style lang="scss">
$font-color: #6c7892;

.DetailItem {
  flex: 1;
  height: 280px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.2s linear;
  cursor: pointer;
  &:hover {
    transform: translate(0, -3px);
    .DetailItem-text {
      color: #87a9f3;
    }
  }
}

.DetailItem-pad {
  width: 100%;
  height: 100%;
  padding: 20px;
}

.DetailItem-img-box {
  height: 70%;
  overflow: hidden;
}

.DetailItem-img {
  width: 100%;
  height: 100%;
  &:hover {
    transform: scale(2) rotate(5deg);
    transition: transform 0.5s ease 0s;
  }
}

.DetailItem-text {
  margin-top: 20px;
  width: 100%;

  color: $font-color;
  font-size: 19px;
  font-weight: bold;
}
</style>
